<!-- 收款账户控件 -->
<template>
  <a-space direction="vertical" style="width: 100%">
    <!-- <a-select
      v-model="form"
      :options="data.list"
      :field-names="fieldNames"
      @click="getData"
    >
    </a-select> -->
    <a-cascader
      :disabled="props.disabled"
      :options="data.list"
      :field-names="fieldNames"
      placeholder="请选择收款账户"
      v-model="form"
    />
  </a-space>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref } from 'vue';
  import { GetAccountInfo } from '@/api/order-management/returned-management/base-setting';

  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      disabled?: boolean;
      oneValue: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );
  const fieldNames = {
    value: 'id',
    label: 'accountName',
    children: 'accountData',
  };
  const emit = defineEmits(['update:oneValue']);
  const form = computed({
    get() {
      return Number(props.oneValue) ?? 0;
    },
    set(val) {
      emit('update:oneValue', val);
    },
  });
  interface Item {
    id: number;
    accountName: string;
    [name: string]: string | number;
  }
  interface DataType {
    list: Item[];
  }

  const data = reactive<any>({ list: [] });
  // const data = reactive<DataType>({ list: [{ id: 0, accountName: '请选择' }] });
  const getData = async () => {
    data.list.length = 0;
    let id = 1; // 后端的结构最外层没返回id，自己设置一个id
    let res = await GetAccountInfo({ page: 0, size: -1 });
    res.forEach((item: any) => {
      item.id = id;
      id += 1;
      item.accountName = item.typeName;
    });

    data.list = res;
    // data.list.unshift(option);
  };

  getData();
</script>

<style scoped lang="less"></style>
